<template>
  <!-- :visible="dialogVisible"
    @update:visible="dialogVisible = $event" -->
  <el-dialog
    title="提示"
    :visible="value"
    width="50%"
    @close="close"
  >
    <div class="import-wrap">
      <!-- 在前端上传文件，打开文件夹，必须只能使用 input type=file 的标签 -->
      <!-- 但是这个标签比较丑，也不能给他修改样式。 我们网上很多好看的上传组件的底层 -->
      <!-- 底层原理都是 将input typefile 设置为display:none  隐藏起来。通过其他的事件，触发这个dom的click事件 -->
      <input ref="inputfileRef" type="file" class="input-file" accept=".xlsx" @change="fileChange">
      <div class="top">
        <i class="el-icon-edit top-icon" />
        <a href="#" class="top-download" @click.prevent="exportExcelTemplate">下载导入模板</a>
        <div class="top-upload">
          <span>将文件拖动到此处或</span>
          <a href="javascript:;" @click.prevent="importFile">点击上传</a>
        </div>
      </div>
      <div class="footer">
        <el-button type="primary">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { exportExcelTemplateRequest, importExcelRequest } from '@/api/employee'
import { saveAs } from 'file-saver'

export default {
  // 因为.sync  visible数据是父组件传递进来的，子组件只能用不能修改
  // 所以在页面上 就不能使用visible.sync 语法，只能拆开了用
  props: {
    value: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('input', false)
    },
    async exportExcelTemplate() {
      const res = await exportExcelTemplateRequest()
      console.log(res)
      saveAs(res, '员工导入模板.xlsx')
    },
    importFile() {
      this.$refs.inputfileRef.click()
    },
    async fileChange(e) {
      try {
        // 上传文件的时候， 大部分的时候使用 FormData构造函数，来写参数
        const formData = new FormData()
        formData.append('file', e.target.files[0])
        //  formData.append('XXX', XXXX)
        await importExcelRequest(formData)

        // 上传成功以后，要做哪些操作
        this.close()
        this.$emit('IMPORT_SUCCESS')

        // this.$refs.inputfileRef.value = '' // 清空上传组件的 内容
      } catch (error) {
        console.log('上传失败')
        // this.$refs.inputfileRef.value = ''
      } finally {
        // 不论代码成功还是失败都会执行 finally这个 分支
        // 在这里将表单数据 清空
        this.$refs.inputfileRef.value = ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.import-wrap {
  .input-file {
    display: none;
  }
  .top {
    padding: 50px;
    border: 1px dashed rgba(204,204,204,0.7);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .top-icon {
      font-size: 50px;
      color: rgba(204, 204, 204, 0.9);
    }
    .top-download {
      margin: 30px 0;
      font-size: 20px;
      color: #3eb0df;
      font-weight: bold;
    }
    .top-upload {
      span {
        color: rgba(204, 204, 204, 0.9);
      }
      a {
        color: #3eb0df;
        font-weight: bold;
      }
      // &:first-child {
      //   color: rgba(204, 204, 204, 0.9);
      // }
      // &:nth-child(2) {
      //   color: #3eb0df;
      //   font-weight: bold;
      // }
    }
  }
  .footer {
    padding: 10px;
    text-align: right;
  }
}
</style>
